<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <title>登录</title>
</head>
<style>
    .form_login {
        width: 300px;
        height: 300px;
        margin: 100px auto;
    }
</style>
<script>
    $(function() {
        var url = "http://39.96.21.48:7788";
        $("#login").on("click",function(){
            // 点击登录获取表单中的值
            var username = $("#username").val();
            var password = $("#password").val();
            var data = {
                username:username,
                password:password
            }
            // 根据用户名密码获取token
            $.ajax({
                url:url+"/user/login",
                method:"post",
                data:JSON.stringify(data),
                // 在jquery封装的ajax中发给后台的默认是查询字符串
                contentType:"application/json",
                success:function(res) {
                    // 将token存储到本地
                    localStorage.setItem('token',res.data.token)
                    // 请求成功后跳转到首页
                    location.href = 'http://127.0.0.1:5500/0.02+03-gitee/5.h5api+jquery/1-jQuery/kdzx/index.html'
                }
            })
            // 阻止表单默认提交行为
            // return false
            event.preventDefault();   
        })
    })
</script>
<body>
    <form class="form_login">
        用户名：<input id="username" type="text" name="username"><br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码：<input id="password" type="password" name="password"><br>
        <input id="login" type="submit" value="登录">
    </form>
</body>
</html>